<template>
  <pro-layout
    v-bind="layoutConf"
    :openKeys="state.openKeys"
    :collapsed="state.collapsed"
    :selectedKeys="state.selectedKeys"
    :loading="loading"
    :breadcrumb="{ routes: breadcrumb }"
    :handleCollapse="handleCollapse"
  >
    <template v-slot:rightContentRender>
      <right-content />
    </template>

    <!-- custom breadcrumb itemRender  -->
    <template v-slot:breadcrumbRender="{ route, params, routes }">
      <span v-if="routes.indexOf(route) === routes.length - 1">
        {{ route.breadcrumbName }}
        </span>
      <router-link v-else :to="{ path: route.path, params }">
         {{ route.breadcrumbName }}
         </router-link>
    </template>

    <!-- content begin -->
    <router-view v-slot="{ Component }">
      <WaterMark :content="watermarkContent">
        <component :is="Component" />
      </WaterMark>
    </router-view>
    <template v-slot:footerRender>
      <global-footer />
    </template>
  </pro-layout>
</template>

<script>
import { computed, reactive, ref, watchEffect, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  getMenuData,
  clearMenuItem,
  WaterMark
} from "@ant-design-vue/pro-layout";
import RightContent from "@/components/GlobalHeader/RightContent";
import GlobalFooter from "@/components/GlobalFooter";

export default {
  name: "BasicLayout",
  components: {
    RightContent,
    GlobalFooter,
    WaterMark
  },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const isMobile = ref(false);
    const watermarkContent = ref("Pro Layout");

    const state = reactive({
      collapsed: false,
      openKeys: ["/dashboard"],
      selectedKeys: ["/dashboard"]
    });

    const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));

    const layoutConf = reactive({
      title: "夏橘管理后台",
      logo: "https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg",
      navTheme: "dark",
      layout: "side",
      fixSiderbar: true,
      fixedHeader: true,
      splitMenus: true,
      menuData
    });

    const breadcrumb = computed(() =>
      router.currentRoute.value.matched.concat().map(item => {
        return {
          path: item.path,
          breadcrumbName: item.meta.title || ""
        };
      })
    );

    const handleCollapse = (val) => {
      state.collapsed = val;
    };

    watchEffect(() => {
      if (router.currentRoute) {
        const matched = router.currentRoute.value.matched.concat();
        state.selectedKeys = matched
          .filter(r => r.name !== "index")
          .map(r => r.path);
        state.openKeys = matched
          .filter(r => r.path !== router.currentRoute.value.path)
          .map(r => r.path);
      }
    });

    onMounted(() => {
      setTimeout(() => {
        watermarkContent.value = "New Mark";
      }, 2000);
    });

    return {
      state,
      loading,
      isMobile,
      breadcrumb,
      layoutConf,
      watermarkContent,
      handleCollapse
    };
  }
};
</script>

<style>
</style>
